<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>私人订制</title>
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/page.css">
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/media.js"></script>
		<script src="../js/common.js"></script>
		<style>
			body {
				background-color: #F7F7F7;
			}
			
			#main_personal {
				background-color: #F7F7F7;
				margin-top: 0.08rem;
			}
			
			.personal_dingZhi {
				width: 3.51rem;
				height: 0.6rem;
				position: relative;
				margin: auto;
				background-color: #FFFFFF;
				border-radius: 5px;
			}
			
			.personal_dingZhi_on {
				width: 100%;
				height: 0.56rem;
			}
			
			.personal_dingZhi_center {
				width: 3.35rem;
				height: 1.6rem;
				margin: auto;
				position: relative;
			}
			
			.personal_dingZhi_center img {
				width: 3.35rem;
				height: 1.6rem;
			}
			
			.personal_dingZhi_Zhe {
				width: 3.35rem;
				height: 0.3rem;
				background-color: rgba(0, 0, 0, 0.6);
				position: absolute;
				bottom: 0px;
				font-size: 0.12rem;
				color: #FFFFFF;
				line-height: 0.3rem;
			}
			
			.personal_dingZhi_Zhe div {
				margin-left: 0.08rem;
			}
			
			.personal_dingZhi_up {
				width: 3.35rem;
				height: 0.4rem;
				margin: auto;
				margin-top: 0.08rem;
				background: #FF0000;
				border-radius: 4px;
				font-size: 16px;
				color: #FFFFFF;
				letter-spacing: -0.04px;
				text-align: center;
				line-height: 0.4rem;
			}
			
			.personal_dingZhi_Image {
				width: 0.44rem;
				height: 0.44rem;
				border-radius: 0.44rem;
				position: absolute;
				top: 0.08rem;
				left: 0.2rem;
				z-index: 9999999;
			}
			
			.personal_dingZhi_Image img {
				width: 0.44rem;
				height: 0.44rem;
				border-radius: 0.44rem;
			}
			
			.personal_dingZhi_on_content {
				height: 0.56rem;
				line-height: 0.56rem;
				margin-left: 0.69rem;
				font-size:0.14rem;
				color: rgba(18, 18, 18, 0.90);
				letter-spacing: -0.02px;
			}
			.custom-made .bd .bd1 ul li .product{
				height: initial;
			}
		</style>
	</head>
	<body>
		<!--
        	作者：chengzhanpeng@163.com
        	时间：2017-10-20
        	描述：修改！
        -->
        <div class="" v-if="datas==0" style="display:flex;justify-content: center;align-items: center;">
        		暂无私人订制
        </div>
        <div v-else>
			<div id="main_personal">
				<div class="personal_dingZhi">
					<div class="personal_dingZhi_Image">
						<img :src="imgurl" />
					</div>
					<div class="personal_dingZhi_on">
						<div class="personal_dingZhi_on_content">{{name}}</div>
					</div>
					<!--<div class="personal_dingZhi_center">
						<img src="../img/bg@3x 2.png" />
						<div class="personal_dingZhi_Zhe">
							<div></div>
						</div>
					</div>-->
					<!--<div class="personal_dingZhi_up">我要定制 </div>-->
				</div>
			</div>
			<!--正文-->
			<div class="custom-made bc-gray">
				<div class="bd">
					<div class="bd1">
						<ul>
							<li v-for='item in datas'>
								<div style="position:relative;">
									<img :src="item.produce_head_image.split(',')[0]" alt="" class="product">
									<p class="main-2-2">{{item.produce_title}}</p>
								</div>
								<span class="button" @click='click_link(item.produce_price,item.produce_id)'>我要定制</span>
							</li>
						</ul>
					</div>
				</div>
	        </div>
		</div>
		<!--灰色浮层-->
		<div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:.84rem;"></div>
		<script src='../js/vue.js'></script>
		<script src='../js/vue-resource.min.js'></script>
		<script>
			$(function() {
				$('.hd span').click(function() {
					$(this).toggleClass('active').siblings().removeClass('active');
					$('.mask').fadeToggle();
					var idx = $(this).index();
					$('.td>div').eq(idx).toggleClass('active').siblings().removeClass('active');
					$(this).toggleClass('arrow-top');
				})
				$('.td1 ul li').click(function() {
					$(this).addClass('active').siblings().removeClass('active');
					$('.mask').hide();
					$('.td>div').removeClass('active');
				})
			})
		</script>
		<script>
			var returnVal = {
				shareTitle:'',//分享的title
				shareLink:'',//分享的链接
				shareImgurl:'',//分享的图片
			};//分享需要发送的数据
			$(function() {
				function getUrlParam(name) {
					var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
					var r = window.location.search.substr(1).match(reg);
					if(r != null) return unescape(r[2]);
					return null; //返回参数值
				}
				var storeId = getUrlParam('storeId');
				var productId = getUrlParam('storeId');
				new Vue({
					el: 'body',
					data: {
						datas: [],
						name:'',
						imgurl:''
					},
					ready: function() {
						console.log(storeId)
						this.$http.get(base_url + 'ZITAOHUI/order/orderProduce', {
							params: {
								storeId: storeId,
								uid: 1
							}
						}).then(
							function(response) {
								console.log(response)
								if(response.data.extend.result){
									var all_data = response.data.extend.result.produce;
									this.$set('datas', all_data);
									this.$set('name', response.data.extend.result.storeName);
									this.$set('imgurl', response.data.extend.result.storeImg);
									returnVal = {
										shareTitle:response.data.extend.result.storeName+'私人订制',//分享的title
										shareLink:window.location.href,//分享的链接
										shareImgurl:response.data.extend.result.storeImg,//分享的图片
									};//分享需要发送的数据									
								}else{
									this.$set('datas', '0');
								}

							}
						)
					},
					methods: {
						click_link: function(price,id) {
							window.location.href = '../page/Fill-in-custom-information.html?s_id=' + storeId +'&price='+price+'&productId='+id;
						}
					}
				})
			})
		</script>
	</body>

</html>